<template>
	<div class="head">
		<div class="left">
			<div class="item" :class="{ select: model.select == 'desinger' }" @click="model.select = 'desinger'">
				<i class="fa-duotone fa-palette" style="color: #0052cc; padding: 0 5px" />
				<span>设计器</span>
			</div>
			<div class="item" :class="{ select: model.select == 'sources' }" @click="model.select = 'sources'">
				<i class="fa-duotone fa-code" style="color: #0052cc; padding: 0 5px" />
				<span>源代码</span>
			</div>
		</div>
		<div class="right">
			<div class="item">
				<el-popconfirm width="220" confirm-button-text="确定" cancel-button-text="关闭" icon-color="#0052cc"
					title="您确定要清空,当前表单设计吗？" @confirm="clearDesigner">
					<template #reference>
						<div>
							<i class="fa-duotone fa-circle-xmark"></i>
							<span>清空</span>
						</div>
					</template>
				</el-popconfirm>
			</div>
			<div class="item">
				<i class="fa-duotone fa-circle-play" />
				<span>预览</span>
			</div>
		</div>
	</div>
</template>

<script setup>
const model = defineModel();
const emits = defineEmits();
const clearDesigner = (e) => {
	emits("clearDesingerData", e);
};
</script>

<style scoped>
.head {
	height: 100%;
	width: 100%;
	box-sizing: border-box;
	border-bottom: 1px solid #eee;
	display: flex;
	justify-content: space-between;
	justify-items: center;
	align-items: center;

	.right {
		height: 100%;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		justify-items: center;
		align-content: center;
		padding: 0 5px;


		.item {
			padding: 4px 10px;
			cursor: pointer;
			align-content: center;
			border-radius: 7px;

			&::before {
				border-left: 1px solid red;
			}

			&:nth-child(2) {
				margin-left: 5px;
			}

			i {
				color: #0052cc;
				padding: 0 5px;
			}

			&:hover {

				background-color: #0052cc;
				color: #fff;
				box-shadow: 0 4px 14px 0 rgba(0, 82, 204, 0.39);
				transition: box-shadow 0.5s,
				background-color 0.3s;

				i {
					color: #fff;
				}
			}
		}
	}

	.left {
		height: 100%;
		display: flex;
		box-sizing: border-box;
		align-items: center;
		justify-items: center;
		align-content: center;

		.item {
			height: 100%;
			padding: 0 5px;
			cursor: pointer;
			border-bottom: 2px solid transparent;
			align-content: center;

			&.select {
				border-bottom: 2px solid #0052cc;
			}

			&:nth-child(2) {
				margin-left: 5px;
			}

			&:hover {
				color: #0052cc;
			}
		}
	}
}
</style>